<template>
	<view class="body">
		<view class="head">
			<view class="head_left">
				
			</view>
			<view class="head_center hei_38_bold">积分商城</view>
			<view class="head_right hei_30"></view>
		</view>
		<view class="content">
			<view class="app_content">
                 <view class="tg_list hei_24" >
                 	<view class="item" v-for="(item,index) in list" @click="xiangqing(item.id)" >
                 		<view class="item_img_box">
                 		<view class="item_img">
                 			<image  :src="item.image_url?item.image_url.split(',')[0]:''" class="shang_img"  mode="aspectFill" ></image>
                           <view class="shoukong_box" v-if="item.stock==0">
                           	<image src="/static/img/shoukong.png" mode="" class="shoukong"></image>
                           </view>
                 		</view>
						
						
                 		</view>
                 		<view class="item_bottom">
                 			<view class="item_name hei_30_bold PingFang">
                 			</view>
                 			<view class="item_guige hui_26">
                 				{{item.name}}
                 				
                 			</view>
                 
                 		<view class="zuyong hong_22" >
                 			<text class="hong_32">{{Number(item.points)}}</text>积分
                 			
                 		</view>
                 		
                 		</view>
                 	</view>
                 </view>
			</view>
		</view>
		<!-- <view class="padding_bottom"></view> -->
		<!-- <tabBar :currentPage="currentPage"  ></tabBar> -->
	</view>
</template>

<script>

	// import tabBar from '@/components/tabbar/tabbar.vue';
	export default {
		data() {
			return {
                currentPage: '/pages/index/shop',
				list:[],
				page:1,
				limit:10,
				is_all:false,
				
			};
		},
		created() {},
		onLoad(option) {
               this.get_list()
		},
		//下拉刷新
		onPullDownRefresh: function() {
			this.list = [];
			this.page = 1;
			this.get_list();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			//上拉加载
			onReachBottom() {
				console.log('上拉加载');
				if (this.is_all) {
					uni.showToast({
						title: '没有更多内容了',
						duration: 2000,
						icon: 'none'
					});
					uni.stopPullDownRefresh();
				} else {
					this.page++;
					this.get_list();
				}
			},
			xiangqing(goodsid){
				uni.navigateTo({
					url:'/pages/index/xiangqing?goodsid='+goodsid
				})
			},
           get_list(){
            	this.$http
            		.get({
            			url: '/api/getAllProducts',
						data:{
							page: this.page,
							limit:this.limit,
						}
            		})
            		.then(res => {
            			if(res.code==200){
            				
            				this.list=this.list.concat(res.list)
							if(res.list.length<this.limit){
								this.is_all=true
							}
            				
            			}
            });
           }

		},
	};
</script>

<style>
page {
	background-color: #f0f2f5;
}
.head_center {
	width: 80%;
}
.head_right image {
	width: 43rpx;
	height: 38rpx;
}
.head_tab_bottom {
	overflow: auto;
	white-space: nowrap;
	box-sizing: border-box;
	border-bottom: 1px solid #eeeeee;
}
.head_tab_bottom::-webkit-scrollbar {
	display: none;
}
.head_tab_bottom text {
	margin-right: 34rpx;
	box-sizing: border-box;
	border-bottom: 1px solid #ffffff;
	line-height: 50rpx;
	position: relative;
	font-family: PingFangSCBold;
	display: inline-block;
}
.head_tab_top {
	border: none;
}

.dd_tab {
	display: flex;
	justify-content: space-between;
	padding: 0 32rpx 0;
}

.head_shaixuan {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	margin-top: 10rpx;
	position: relative;
}
.head_shaixuan text{
	margin-right: 10rpx;
	line-height: 48rpx;
	display: inline-block;
}
.head_shaixuan text:last-child{
	margin-right: 0;
}
.head_shaixuan_item:first-child{
	position: relative;
}
.head_shaixuan::before{
	position: absolute;
	content: '';
	display: inline-block;
	width: 1px;
	height: 28rpx;
	background-color: #cccccc;
	left: 43%;
	top: 12rpx;
}

.head_shaixuan_item_fenlei image {
	width: 10rpx;
	height: 6rpx;
	vertical-align: middle;
	margin-left: 12rpx;
}
.head_shaixuan_shai{
	font-weight: initial;
}
.head_shaixuan_shai image {
	width: 22rpx;
	height: 21rpx;
	margin-right: 6rpx;
}

.bg {
	background-color: rgba(0, 0, 0, 0.2);
	position: fixed;
	width: 100%;
	height: 100%;
	bottom: 0;
}
.tg_list {
	display: flex;
	/* align-items: center; */
	flex-wrap: wrap;
	/* background-color: #ffffff; */
	padding: 10rpx 0rpx 0;
}

.item_img{
	width: calc((100% - 0rpx));
	height: 290rpx;
	
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}
.item_img_box{
	padding: 0 40rpx;
	position: relative;
}

.item_img .shang_img{ 
	width:100%;
	vertical-align: bottom;
	
}
.item{
	width: calc((100% - 2rpx)/2);
	margin-right: 2rpx;
	background-color: #ffffff;
	/* margin-bottom: 10rpx; */
	overflow: hidden;
	/* border-bottom: 1px solid #eeeeee; */
	box-sizing: border-box;
	/* height: 510rpx; */
	margin-bottom: 2rpx;
	padding-top: 40rpx;
	padding-bottom: 16rpx;
	
}
.item:nth-child(2n){
	margin-right: 0;
	
}
/* .item:nth-child(2n-1){
	border-right: 1px solid #eeeeee;
} */
.item_bottom{
	padding: 0 30rpx;
}
.item_name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 66rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item_name text{
	max-width: 240rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item_guige{
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* autoprefixer: off */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    
    /* autoprefixer: on */
	margin-top: 18rpx;
	line-height: 40rpx;
	
}


/* #ifdef MP-ALIPAY||MP-WEIXIN||MP-KUAISHOU */
.item_img .shang_img{
	width: 100% !important;
	height: 100%;
}
/* #endif */

.zuyong{
	margin: 10rpx 0 6rpx;
	display: flex;
	align-items: center;
}
.zuyong text{
	margin-right: 6rpx;
}
.shoukong_box{
	background-color: rgba(0, 0, 0, 0.3);
	height: 290rpx;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.shoukong{

	width: 150rpx ;
	height: 150rpx ;
}
</style>